<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <!-- BootStrap不支持IE的兼容模式,下面代码为了代码在IE下运行最新的渲染模式 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 初始化移动设备的浏览 width=device-width 视口的宽度等于设备宽度，initial-scale=1 缩放比例为1 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>羽Libra::登录</title>

  <!-- 加载图标 -->
  <link type="image/x-icon" href="${ctx}/static/images/logo/favicon.ico" rel="shortcut icon">
  <!-- 加载Bootstrap css 样式 -->
  <link href="${ctx}/static/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet">

  <!-- 加载阿里巴巴矢量图标 http://www.iconfont.cn/ -->
  <link href="http://at.alicdn.com/t/font_1439283647_372718.css" rel="stylesheet">

  <!-- 加载字体样式 -->
  <link href="${ctx}/static/bootstrap-3.3.5-dist/fonts/define-font.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- 使IE8支持HTML5标签 -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
  <!--[if lt IE 9]>
  <script src="${ctx}/static/support/html5shiv.min.js"></script>
  <script src="${ctx}/static/support/respond.min.js"></script>
  <![endif]-->

  <style type="text/css">
    .box-shadow {
      -webkit-box-shadow: 0 0 50px rgba(0, 134, 204, 0.5);
      -moz-box-shadow: 0 0 50px rgba(0, 134, 204, 0.5);
      box-shadow: 0 0 50px rgba(0, 134, 204, 0.5);
    }
  </style>

</head>
<body>
<div class="container">
  <!-- 设置登录框与网页顶部的间隔 -->
  <div id="space"></div>

  <div class="col-md-offset-3 col-md-6">
    <!-- 判断是否登录成功，如果不成功，给出警告 -->
    <%
      String error = (String) request.getAttribute(FormAuthenticationFilter.DEFAULT_ERROR_KEY_ATTRIBUTE_NAME);
      if (error != null) {
    %>
    <div class="alert alert-warning alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert">
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">关闭</span>
      </button>
      <strong>警告:</strong> 登录失败,帐号或密码错误
    </div>
    <%
      }
    %>
    <div class="panel panel-info box-shadow">

      <div class="panel-body">
        <!-- 面板主体内容 -->
        <form action="${ctx}/login" method="post" role="form">
          <div class="form-group">
            <label for="username">用户名 / 邮箱 / 手机号</label>

            <div class="input-group">
              <span class="input-group-addon">
                <i class="iconfont icon-yonghu"></i>
              </span>
              <input type="text" class="form-control" id="username" name="username" value="${username}" placeholder="输入登录账号" <shiro:user>disabled</shiro:user>>
            </div>
          </div>
          <div>
            <label for="password">密码</label>

            <div class="input-group">
              <span class="input-group-addon">
                <i class="iconfont icon-mima"></i>
              </span>
              <input type="password" class="form-control" id="password" name="password" placeholder="密码" <shiro:user>disabled</shiro:user> >
            </div>
          </div>
          <br>
          <shiro:user>
            <a href="${ctx }/workbench" class="btn btn-primary"> 您已登录，点击按钮进入系统 &gt;&gt; </a>
            <a href="${ctx}/logout" class="btn btn-danger pull-right"><span class="glyphicon glyphicon-log-out"></span>
              退 出 </a>
          </shiro:user>
          <shiro:guest>
            <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-log-in"></span> 登 录</button>
          </shiro:guest>
        </form>
        <!-- ／面板主体内容 -->
      </div>
    </div>
  </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${ctx}/static/jquery/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${ctx}/static/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

<!-- 获取页面的高度、宽度 -->
<script src="${ctx}/static/support/pagesize.js"></script>

<script type="application/javascript">
  $("#username").focus();

  $("#space").height((getPageSize()[3]) / 4);
  $(window).resize(function () {
    //窗口发生变化时，重置登陆框位置.
    $("#space").height((getPageSize()[3]) / 4);
  });
</script>

</body>
</html>